<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <!-- 1.数据仓库中的变量的值 -->
    <h2>数据仓库中的变量的值</h2>
    <p>msg:{{ msg }}</p>
    <p>id:{{ id }}</p>
    <p>username:{{ username }}</p>
    <p>password:{{ password }}</p>
    <p>phone:{{ phone }}</p>
    <p>address:{{ address }}</p>


    <!--
        2.非正常数据
        在数据仓库中,为这些变量进行了赋值
        但是其值的内容不太正常
        主要分为三种值:null、undefined、NaN
        如果值为null或者undefined,则直接显示空字符串
        如果值为NaN,则显示的就是NaN
     -->
    <h2>非正常数据</h2>
    <p>null:{{ test }}</p>
    <p>undefined:{{ test2 }}</p>
    <p>NaN:{{ test3 }}</p>

    <!--
        3.数据仓库中没有的数据
        此时页面中数据为空,且控制台会报错
     -->
    <h2>数据仓库中没有的数据</h2>
    <p>数据仓库中没有的数据:{{ salary }}</p>


    <!-- 4.JS表达式 -->
    <h2>JS表达式</h2>
    <p>{{ num + 2 }}</p>
    <p>{{ num - 2 }}</p>
    <p>{{ num * 2 }}</p>
    <p>{{ num / 2 }}</p>
    <p>{{ num > 2 }}</p>
    <p>{{ num > 2 && num <= 3 }}</p>
    <p>{{ age > 18 ? '成年' : '未成年' }}</p>

    <!--
        5.直接定义值
        如果是字符串,不能直接写
        直接写字符串,默认是找变量名
        因此,字符串需要加引号
     -->
    <h2>直接定义值</h2>
    <p>{{ 1 }}</p>
    <p>{{ "admin" }}</p>
    <p>{{ true }}</p>

    <!-- 6. JS内置对象 -->
    <h2>JS内置对象</h2>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script>
    new Vue({
        el: "#d1", // 指定关联的元素,即表示Vue的作用域
        data: {
            msg:"Hello Vue",
            id:1,
            username:"亚索",
            password:"123456",
            phone:"13812345678",
            address:"英雄联盟",
            test:null,
            test2:undefined,
            test3:NaN,
            num:3,
            age:20
        }
    });
</script>
</html>